<template>
	<view class="box">
		<view class='top'>
			<view class='top-item'>
				<view v-for="(item,index) in data.list1" class='item'>
					<span class='num'>{{item.num}}</span>
					<span class='text'>{{item.text}}</span>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class='font'>任务情况</view>
			<view class="content">
				<qiun-data-charts type="column" :opts="data.opts" :chartData="data.chartData" :canvas2d="true"
					canvasId="lPnwIVAtmBrZpKkoqMJySGgJgIMzFmuA" />
			</view>
		</view>
		<view class="bottom">
			<view class='font'>维保费用</view>
			<qiun-data-charts type="ring" :opts="data.opts1" :chartData="data.chartData1" :canvas2d="true"
				canvasId="vnZLWqDeyVvMlzVuQTIKGWqFvZGSOEji" />
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	const data = reactive({
		list1: [{
				text: '未执行任务',
				num: 122
			},
			{
				text: '已完成任务',
				num: 431
			},
			{
				text: '超时任务',
				num: 17
			},
			{
				text: '已过期任务',
				num: 24
			},
		],
		opts: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 15, 0, 5],
			enableScroll: false,
			legend: {},
			xAxis: {
				disableGrid: true
			},
			yAxis: {
				data: [{
					min: 0
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 30,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08
				}
			}
		},
		chartData: {
			categories: ["张三", "李四", "王五", "赵六", "田七", "慌得流"],
			series: [{
					name: "任务数",
					data: [35, 36, 31, 33, 13, 34]
				},
				{
					name: "完成数",
					data: [18, 27, 21, 24, 6, 28]
				}
			]
		},
		opts1: {
			rotate: false,
			rotateLock: false,
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: true,
				position: "right",
				lineHeight: 25
			},
			title: {
				name: "收益率",
				fontSize: 15,
				color: "#666666"
			},
			subtitle: {
				name: "70%",
				fontSize: 25,
				color: "#7cb5ec"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: false,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		},
		chartData1: {
			series: [{
				data: [{
					"name": "一级维保",
					"value": 50
				}, {
					"name": "二级维保",
					"value": 30
				}, {
					"name": "日常维保",
					"value": 20
				}, {
					"name": "其他维保",
					"value": 18
				}]
			}]
		}
	})
</script>

<style lang="less" scoped>
	.box {
		.top {
			height: 100px;
			background-color: #40b3ff;
			padding: 30px 10px 30px 10px;
			.top-item {
				padding: 50rpx 20rpx;
				background-color: white;
				display: flex;
				border-radius: 20rpx;
				.item:last-child {
					border: none;
				}
				.item {
					border-right: 1rpx solid gray;
					display: flex;
					margin: 20rpx 0;
					flex-direction: column;
					align-items: center;
					flex: 1;
					.num {
						color: #4b57ff;
						font-size: 20px;
					}
					.text {
						font-size: 28rpx;
					}
				}
			}
		}
		.middle {
			.font {
				font-size: 40rpx;
				background-color: whitesmoke;
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
			}
			.content {
				height: 200px;
			}
		}
		.bottom {
			.font {
				font-size: 40rpx;
				background-color: whitesmoke;
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
			}
			.content {
				height: 200px;
			}
		}
	}
</style>